<template>
	<view class="main">
		<view class="page-title">首页</view>
		<view class="home-imgs">
			<swiper class="swiper" indicator-dots :autoplay="true" :interval="5000" circular indicator-color="#FFFFFF" indicator-active-color="#3A70FF">
				<swiper-item v-for="(item,index) in imgs" :key="index">
					<image :src="item.img_path" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="home-icons">
			<view class="icon-item" v-for="(item,index) in icons" :key="index" @click="choose(item.page)">
				<image :src="item.img" mode="aspectFit"></image>
				<view class="icon-title">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="home-notice" @click="showNotice">
			<image src="../../static/img/home/notice.png" mode="aspectFit"></image>
			<uni-notice-bar class='texttab' showIcon="false" showGetMore="false" :scrollable="false" single="true" backgroundColor="#FFFFFF" color="#353535"
				:text="notice.title" moreText="详情"></uni-notice-bar>
		</view>
		<view class="home-title">宣传视频</view>
		<view class="home-content">
			<video class="video" id="myVideo"
				src="http://hmapi.kgyui.com/gxsxc1121.mp4" 
				autoplay="true"
				initial-time="0"
				v-if="viedo.show"
				@fullscreenchange="fullscreenchange"
				loop="true">
			</video>
			<!-- <image src="../../static/img/home/bg1.png" mode="scaleToFill" @click="play"></image> -->
			<view class="cont-title">公司简介</view>
			<view class="p1">
				清研环境科技股份有限公司(股票代码:301288)成立于2014年,是深圳清华大学研究院孵化的国家高新技术企业和国家级专精特新“小巨人”企业。
			</view>
			<image src="../../static/img/home/bg.png" mode="aspectFit"></image>
			<view class="p1">
				公司坚持“以创新技术装备化为路径,以创新装备工艺包为产品，为行业上下游提供高质量价值服务”的发展战略，致力于打造国际领先的高端环保装备研发推广服务平台。公司以市政污水处理厂缺地新建、提标、扩容,黑臭河道控源截污及流域水体水质改善,村镇分散污水低成本处理,工业有机废水治理等领域巨大的市场需求为导向,围绕快速生化污水处理技术方向，持续研究完善RPIR快速生化污水处理系列技术，持续对创新技术进行装备化,结合行业上下游不同应用场景,提供专利装备工艺包,成为污水处理创新技术装备化变革的引领者,赢得了企业的快速发展。
			</view>
		</view>
		
		<uni-popup ref="popup" background-color="transparent" :mask-click="false" :animation="false">
			<view class="popup-content">
				<view class="popup-header">
					<image class="bg" src="../../static/img/home/gg/bg.png" mode="aspectFit"></image>
					<image class="close" src="../../static/img/home/gg/gb.png" mode="aspectFit" @click="closeNotice"></image>
				</view>
				<view class="popup-info" v-html="decodeHtml(notice.content)">
				</view>
				<view class="popup-btn">
					<button class="btn" type="default" @click="closeNotice">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs:[],
				icons:[
					{
						img:'../../static/img/home/qd.png',
						title:'签到',
						page:'qd'
					},
					{
						img:'../../static/img/home/cj.png',
						title:'幸运抽奖',
						page:'cj/cj'
					},
					{
						img:'../../static/img/home/yxb.png',
						title:'供销社',
						page:'yxb/yxb'
					},
					{
						img:'../../static/img/home/yq.png',
						title:'邀请好友',
						page:'../yaoqing/yaoqing'
					}
				],
				notice:{},
				viedo:{
					show:false,
					path:'',
					iscontrols:false
				}
			}
		},
		methods: {
			// 播放时进入全屏
			play() {
				this.viedo.show = true
				this.$nextTick(() => {
					let videoContext = uni.createVideoContext('myVideo', this)
					videoContext.requestFullScreen()
					videoContext.play()
				})
			},
			//退出全屏时暂停
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					uni.createVideoContext('myVideo', this).pause();
					this.viedo.show = false
				}else{
					this.play()
				}
			},
			//获取轮播图
			getBanner(){
				this.$http.get('/v1/slide_list',res => {
					this.imgs = res.data
					this.imgs.forEach(item => {
						if(!item.img_path.startsWith("http")){
							item.img_path = this.$global.imgUrl + item.img_path
						}
					})
				})
			},
			//获取公告
			getNotice(){
				this.$http.get('/v1/notice_list',res => {
					let list = res.data
					this.notice = list[list.length -1]
					this.showNotice()
				})
			},
			//页面跳转
			choose(url){
				if(url == 'qd'){
					this.qiandao()
				}else{
					uni.navigateTo({
						url: url
					})
				}
			},
			qiandao(){//签到
				this.$http.get('v1/sign_in',(res)=>{
					if(res.code == 200){
						uni.showToast({
							 icon: 'none',
							 title: res.message,
						})
					}
				})
			},
			// 公告弹窗
			showNotice(){
				this.viedo.show = false
				this.$refs.popup.open('center')
			},
			closeNotice(){
				this.$refs.popup.close()
				this.viedo.show = true
			},
			videoErrorCallback: function (e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},
			decodeHtml : function(s){
				var  REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;
				var HTML_ENCODE =  {
						 "&lt;"  : "<", 
						 "&gt;"  : ">", 
						 "&amp;" : "&", 
						 "&nbsp;": " ", 
						 "&quot;": "\"", 
						 "&copy;": "©",
					 }
			      return (typeof s != "string") ? s :
			          s.replace(REGX_HTML_DECODE,
			                    function($0,$1){
			                        var c = HTML_ENCODE[$0]; // 尝试查表
			                        if(c === undefined){
			                            // Maybe is Entity Number
			                            if(!isNaN($1)){
			                                c = String.fromCharCode(($1 == 160) ? 32 : $1);
			                            }else{
			                                // Not Entity Number
			                                c = $0;
			                            }
			                        }
			                        return c;
			                    });
			  }
		},
		onLoad() {
			this.getBanner()
			this.getNotice()
		}
	}
</script>

<style lang="scss">
	
	.home-imgs{
		width: 100%;
		height: 300upx;
		border-radius: 20upx;
		margin-top: 20upx;
		.swiper{
			width: 100%;
			height: 300upx;
			image{
				border-radius: 30upx;
				width: 100%;
				height: 100%;
			}
		}
	}
	.home-icons{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 200upx;
		width: 100%;
		.icon-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 150upx;
			image{
				width: 80upx;
				height: 80upx;
			}
			.icon-title{
				margin-top: 20upx;
				text-align: center;
				
			}
		}
	}
	.home-notice{
		width: 750upx;
		height: 100upx;
		margin-top: 20upx;
		margin-left: -30upx;
		border-top: 1px solid #F8F8F8;
		border-bottom: 1px solid #F8F8F8;
		display: flex;
		justify-content: left;
		align-items: center;
		image{
			width: 36upx;
			height: 36upx;
			margin-left: 60upx;
		}
		.texttab{
			height: 80upx;
			margin: 0upx;
		}
	}
	.home-content{
		width: 100%;
		margin-bottom: 40upx;
		.video{
			width: 100%;
			height: 400upx;
			margin-top: 20upx;
		}
		image{
			width: 100%;
			height: 400upx;
			margin-top: 20upx;
		}
		.cont-title{
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			font-size: 32upx;
			font-weight: 400;
			text-align: center;
			color: #333333;
		}
		.p1{
			margin-top: 10upx;
			color: #333333;
			font-size: 28upx;
		}
	}
	.popup-content{
		width: 540upx;
		height: 620upx;
		padding: 0upx 0upx 10upx 0upx;
		border-radius: 30upx;
		background-color: #FFFFFF;
		position: relative;
		.popup-header{
			width: 100%;
			height: 180upx;
			position: relative;
			.bg{
				width: 100%;
				height: 100%;
			}
			.close{
				width: 44upx;
				height: 44upx;
				position: absolute;
				top: 0upx;
				right: 0upx;
				z-index: 2;
			}
		}
		.popup-header::before{
			content: '';
			width: 128upx;
			height: 128upx;
			background-image: url(../../static/img/home/gg/laba.png);
			background-size: 100% 100%;
			border-radius: 50%;
			z-index: 99;
			position: absolute;
			top: -64upx;
			left: 210upx;
		}
		.popup-info{
			width: 500upx;
			padding: 20upx;
			max-height: 300upx;
			font-size: 27upx;
			color: #333333;
			overflow-y: auto;
			
		}
		.popup-btn{
			margin-top: 20upx;
			position: absolute;
			bottom: 20upx;
			width: 100%;
			.btn{
				height: 80upx;
				line-height: 80upx;
				font-size: 28upx;
				width: 60%;
				border-radius: 40upx;
			}
		}
	}
</style>
